.transaction-shield-page {
  &__error-content {
    margin-top: 120px;
  }

  &__row {
    margin-bottom: 1px;

    &:first-child {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    &:last-child {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      margin-bottom: 0;
    }
  }

  &__membership {
    height: 85px;
    position: relative;
    overflow: hidden;

    &--active {
      background-color: var(--color-accent03-dark);
    }

    &--loading {
      background-color: var(--color-border-muted);
    }

    &--inactive {
      background-color: var(--color-background-subsection);

      &-light {
        background-color: var(--shield-membership-inactive-light);
      }
    }
  }

  &__membership-text {
    color: var(--color-accent03-light);
  }

  &__membership--inactive &__membership-text {
    color: var(--color-text-default);
  }

  &__notification-banner {
    margin-inline: 0;

    @include design-system.screen-sm-max {
      margin-inline: -16px;
    }
  }

  &-shield-banner {
    &__container {
      position: absolute;
      top: -4px;
      right: 0;
      height: 93px;
      width: 93px;
    }

    &__canvas {
      height: 100%;
      width: 100%;
    }
  }

  &-shield-icon {
    &__container {
      height: 32px;
      width: 32px;
    }

    &__canvas {
      height: 100%;
      width: 100%;
    }
  }
}

.account-selector-modal {
  .account-selector-modal__account {
    &:hover {
      background-color: var(--color-background-hover);
    }
  }

  &__account--selected {
    background-color: var(--color-primary-muted);
  }
}
